<template>
  <div id="poster-wrapper">
    <canvas id="main"></canvas>
  </div>
</template>

<script>
import { fabric } from 'fabric'
import { state, setCanvs } from './store'

export default {
  data () {
    return {
      canvas: null
    }
  },
  mounted () {
    this.initCanvas()
  },
  methods: {
    initCanvas () {
      const canvas = new fabric.Canvas('main')

      const posterWrapperEl = document.querySelector('#poster-wrapper')

      canvas.setWidth(posterWrapperEl.clientWidth)
      canvas.setHeight(posterWrapperEl.clientHeight)
      this.canvas = canvas
      state.canvas = canvas
      setCanvs(canvas)
    }
  }
}
</script>

<style lang="stylus" scoped>
#poster-wrapper {
  position: absolute;
  top: 50px;
  bottom: 74px;
  left: 0;
  right: 0;
  background-color #f1f1f1;
}
</style>
